<div class="preview" *ngIf="policy">
  <div
    class="dashed"
    [ngClass]="{ dark: theme === Theme.DARK, light: theme === Theme.LIGHT }"
    [style.background]="theme === Theme.DARK ? policy.backgroundColorDark : policy.backgroundColor"
  >
    <div class="login-wrapper" [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor">
      <img *ngIf="policy.logoUrl && theme === Theme.LIGHT" [src]="policy.logoUrl" alt="logo-mock" />
      <img *ngIf="policy.logoUrlDark && theme === Theme.DARK" [src]="policy.logoUrlDark" alt="logo-mock" />

      <h1 [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor">
        {{ 'POLICY.PRIVATELABELING.PREVIEW.TITLE' | translate }}
      </h1>
      <p [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor" class="desc-text">
        {{ 'POLICY.PRIVATELABELING.PREVIEW.SECOND' | translate }}
      </p>
      <cnsl-form-field class="formfield">
        <cnsl-label>Loginname</cnsl-label>
        <input
          cnslInput
          [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor"
          value="road.runner"
        />
      </cnsl-form-field>

      <div class="error-msg" [style.color]="theme === Theme.DARK ? policy.warnColorDark : policy.warnColor">
        <i
          class="las la-exclamation-circle"
          [style.color]="theme === Theme.DARK ? policy.warnColorDark : policy.warnColor"
        ></i>
        <span [style.color]="theme === Theme.DARK ? policy.warnColorDark : policy.warnColor">{{
          'POLICY.PRIVATELABELING.PREVIEW.ERROR' | translate
        }}</span>
      </div>

      <div class="btn-wrapper">
        <button
          mat-stroked-button
          [style.borderColor]="theme === Theme.DARK ? '#ffffff1f' : '#0000001f'"
          [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor"
        >
          {{ 'POLICY.PRIVATELABELING.PREVIEW.SECONDARYBUTTON' | translate }}
        </button>
        <button
          *ngIf="theme === Theme.DARK"
          mat-raised-button
          [style.background]="policy.primaryColorDark"
          [style.color]="contrastTextColor"
        >
          {{ 'POLICY.PRIVATELABELING.PREVIEW.PRIMARYBUTTON' | translate }}
        </button>
        <button
          *ngIf="theme === Theme.LIGHT"
          mat-raised-button
          [style.background]="policy.primaryColor"
          [style.color]="contrastTextColor"
        >
          {{ 'POLICY.PRIVATELABELING.PREVIEW.PRIMARYBUTTON' | translate }}
        </button>
      </div>
    </div>
  </div>
</div>
